<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:type="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>个人资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form layui-row" id="useInfotable" method="post">
    <div class="layui-col-md3 layui-col-xs12 user_right">
        <div class="layui-upload-list userFace">
            <input type="hidden" name="imgpath" id="imgpath">
            <img class="layui-upload-img layui-circle userFaceBtn userAvatar" id="userFace">
        </div>
        <button type="button" class="layui-btn layui-btn-primary userFaceBtn"><i class="layui-icon">&#xe67c;</i>上传头像</button>
        <!--<p>由于是纯静态页面，所以只能显示一张随机的图片</p>-->
    </div>
    <div class="layui-col-md6 layui-col-xs12">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="hidden" class="id" name="id" value="">
                <input type="text" value=""name="name" id="name" th:value="${session.user.name}" disabled class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登陆名</label>
            <div class="layui-input-block">
                <input type="text" value="" name="loginname" id="loginname" th:value="${session.user.loginname}" disabled class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" value="" th:value="${session.user.email}"style="width:75%; float: left" name="email"id="email" lay-verify="required" disabled class="layui-input userPhone">
                <button style="width:25%; height:38px;" class="layui-input" type="button" onclick="yanzheng()">换绑</button>
            </div>
        </div>
<!--        <input type="hidden" name="email"id="email" value="" th:value="${session.user.email}">-->
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="text" value="" th:value="${session.user.phone}"style=" float: left" name="phone" id="phone" lay-verify="required"  class="layui-input userPhone">
<!--                <button style="width:25%; height:38px;" class="layui-input" type="button" onclick="sendEmail()">发送验证码</button>-->
            </div>
        </div>
        <!--<div class="layui-form-item" >
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block" >
                <input type="text" value=""placeholder="输入验证码" id="code" style="width:75%;float: left"  class="layui-input usercode">
                <button style="width:25%; height:38px;" class="layui-input" type="button" onclick="codeTest()">验证</button>
            </div>
        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">个人备注</label>
            <div class="layui-input-block">
                <input type="text" value="" name="remark" id="remark"  class="layui-input ">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">家庭地址</label>
            <div class="layui-input-block">
                <input type="text" value="" name="address" id="address"  class="layui-input ">
            </div>
        </div>
        <!--<div class="layui-form-item" pane="">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block userSex">
                <input type="radio" name="sex" value="1" title="男" checked="">
                <input type="radio" name="sex" value="0" title="女">
            </div>
        </div>-->

        <!--<div class="layui-form-item">
            <label class="layui-form-label">出生年月</label>
            <div class="layui-input-block">
                <input type="text" value="" placeholder="请输入出生年月" lay-verify="userBirthday" readonly class="layui-input userBirthday">
            </div>
        </div>-->
        <!--<div class="layui-form-item userAddress">
            <label class="layui-form-label">家庭住址</label>
            <div class="layui-input-inline">
                <select name="province" lay-filter="province" class="province">
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="city" lay-filter="city" disabled>
                    <option value="">请选择市</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="area" lay-filter="area" disabled>
                    <option value="">请选择县/区</option>
                </select>
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">掌握技术</label>
            <div class="layui-input-block userHobby">
                <input type="checkbox" name="like[javascript]" title="Javascript">
                <input type="checkbox" name="like[C#]" title="C#">
                <input type="checkbox" name="like[php]" title="PHP">
                <input type="checkbox" name="like[html]" title="HTML(5)">
                <input type="checkbox" name="like[css]" title="CSS(3)">
                <input type="checkbox" name="like[.net]" title=".net">
                <input type="checkbox" name="like[ASP]" title="ASP">
                <input type="checkbox" name="like[Angular]" title="Angular">
                <input type="checkbox" name="like[VUE]" title="VUE">
                <input type="checkbox" name="like[XML]" title="XML">
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" value="" placeholder="请输入邮箱" lay-verify="email" class="layui-input userEmail">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">自我评价</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea myself"></textarea>
            </div>
        </div>-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="changeUser">立即提交</button>
                <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </div>
</form>
<div id="yanzhenshoujiDiv" style="display: none;padding: 10px;padding-right: 5%">
    <form action="" method="post" class="layui-form" id="dataFrm1" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" value="" th:value="${session.user.email}"style="; float: left" name="email2"id="email2" lay-verify="required" disabled class="layui-input userPhone">
<!--                <button style="width:25%; height:38px;" class="layui-input" type="button" onclick="yanzheng()">换绑</button>-->
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block" >
                <input type="text" value=""placeholder="输入验证码" id="code2" style="float: left"  class="layui-input usercode">
<!--                <button style="width:25%; height:38px;" class="layui-input" type="button" onclick="sendEmail2()">发送验证码</button>-->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="button" onclick="emailyanzheng()">验证</button>
                <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </form>
</div>
<div id="yanzhenshoujiDiv2" style="display: none;padding: 10px;padding-right: 5%">
    <form action="" method="post" class="layui-form" id="dataFrm2" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">新邮箱</label>
            <div class="layui-input-block">
                <input type="email" value="" placeholder="请输入新邮箱" style="width:75%;float: left" name="email3"id="email3" lay-verify="required"  class="layui-input userPhone">
                 <button style="width:25%; height:38px;" class="layui-input" type="button" onclick="sendEmail3()">发送验证码</button>
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block" >
                <input type="text" value=""placeholder="输入验证码" id="code3" style="float: left"  class="layui-input usercode">
                <!--                <button style="width:25%; height:38px;" class="layui-input" type="button" onclick="sendEmail2()">发送验证码</button>-->
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="button" onclick="newemailupdate()">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<!--<script type="text/javascript" src="/resources/page/user/userInfo.js"></script>-->
<!--<script type="text/javascript" src="/resources/js/cacheUserInfo.js"></script>-->
<script type="text/javascript">
    //打开验证弹出层
    function yanzheng() {
        var layer = layui.layer;
        var $ = layui.jquery;
        mainIndex = layer.open({
            type: 1,
            content: $("#yanzhenshoujiDiv"),
            area: ['500px', '250px'],
            title: '邮箱验证',
            success: function () {
                var form = layui.form;
                var layer = layui.layer;
                var $ = layui.jquery;
                var index = layer.msg('发送中，请稍候',{icon: 16,time:false,shade:0.8});

                var email = $("#email");
                $.ajax({
                    url: "/user/sendEmail"
                    , data: {"email": email.val()}
                    , type: "post"
                    , success: function (res) {
                        setTimeout(function(){
                            layer.close(index);
                            layer.msg("发送成功！");
                            /*$('#phone').attr("disabled",false);*/
                            $('#code').attr("disabled",false);
                        },2000);
                    }
                })
                return false;
            }
        });
    }
    //打开验证弹出层
    function yanzheng2() {
        var layer = layui.layer;
        var $ = layui.jquery;
        mainIndex = layer.open({
            type: 1,
            content: $("#yanzhenshoujiDiv2"),
            area: ['500px', '250px'],
            title: '邮箱验证',
            success: function () {
            }
        });
    }

    function sendEmail() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var index = layer.msg('发送中，请稍候',{icon: 16,time:false,shade:0.8});

        var email = $("#email");
        $.ajax({
            url: "/user/sendEmail"
            , data: {"email": email.val()}
            , type: "post"
            , success: function (res) {
                setTimeout(function(){
                    if(res.code==-1){
                        layer.msg(res.msg);
                        return;
                    }
                    else{
                        layer.close(index);
                        layer.msg("发送成功！");
                        /*$('#phone').attr("disabled",false);*/
                        // $('#code').attr("disabled",false);
                    }

                },2000);
            }
        })
        return false;
    }
    function sendEmail2() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var index = layer.msg('发送中，请稍候',{icon: 16,time:false,shade:0.8});

        var email2 = $("#email2");
        $.ajax({
            url: "/user/sendEmail"
            , data: {"email2": email2.val()}
            , type: "post"
            , success: function (res) {
                setTimeout(function(){
                    if(res.code==-1){
                        layer.msg(res.msg);
                        return;
                    }
                    else{
                        layer.close(index);
                        layer.msg("发送成功！");
                        /*$('#phone').attr("disabled",false);*/
                        // $('#code').attr("disabled",false);
                    }

                },2000);
            }
        })
        return false;
    }
    function sendEmail3() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var index = layer.msg('发送中，请稍候',{icon: 16,time:false,shade:0.8});

        var email3 = $("#email3");
        if(!email3.val){
           layer.msg('邮箱为空',{icon: 16,time:false,shade:0.8});
           return ;
        }
        $.ajax({
            url: "/user/sendEmail"
            , data: {"email": email3.val()}
            , type: "post"
            , success: function (res) {
                setTimeout(function(){
                    if(res.code==-1){
                        layer.msg(res.msg);
                        return;
                    }
                    else{
                        layer.close(index);
                        layer.msg("发送成功！");
                        /*$('#phone').attr("disabled",false);*/
                        // $('#code').attr("disabled",false);
                    }

                },2000);
            }
        })
        return false;
    }
    function codeTest() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var index = layer.msg('验证中，请稍候',{icon: 16,time:false,shade:0.8});

        var code = $("#code");
        $.ajax({
            url: "/user/codeTest"
            , data: {"code": code.val()}
            , type: "post"
            , success: function (res) {
                setTimeout(function(){
                    layer.close(index);
                    if (res.code==-1){
                        layer.msg(res.msg);
                        return ;
                    }
                    layer.msg(res.msg);
                    $('#phone').attr("disabled",false);
                },2000);
            }
        })
        return false;
    }
    function emailyanzheng() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var index = layer.msg('验证中，请稍候',{icon: 16,time:false,shade:0.8});
        var code2 = $("#code2");
        $.ajax({
            url: "/user/codeTest"
            , data: {"code": code2.val()}
            , type: "post"
            , success: function (res) {
                setTimeout(function(){
                    layer.close(index);
                    if (res.code==-1){
                        layer.msg(res.msg);
                        return ;
                    }
                    layer.msg("验证成功，请输入新邮箱验证");

                },1000);
                setTimeout(function(){
                    yanzheng2();
                },2000);

            }
        })
        return false;
    }
    function newemailupdate() {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var index = layer.msg('验证中，请稍候',{icon: 16,time:false,shade:0.8});
        var code3 = $("#code3");
        var email3 = $("#email3");
        $.ajax({
            url: "/user/newemailupdate"
            , data: {"code": code3.val(),"email": email3.val()}
            , type: "post"
            , success: function (res) {
                setTimeout(function(){
                    layer.close(index);
                    if (res.code==-1){
                        layer.msg(res.msg);
                        return ;
                    }

                },2000);
            }
        })
        // return false;
    }
</script>
<script type="text/javascript">

    layui.use(['jquery','upload','form'],function () {

        var $ = layui.jquery;
        var upload = layui.upload;
        var form = layui.form;

        //获得当前用户的登陆名
        var loginname = $("#loginname");
        $.get('/user/getNowUser',function (res) {
            var name = $("#name");
            name.val(res.name);
            var id = $(".id");
            id.val(res.id);
            var loginname = $("#loginname");
            loginname.val(res.loginname);
            var remark = $("#remark");
            remark.val(res.remark);
            var address = $("#address");
            address.val(res.address);
            var imgpath = res.imgpath;
            $('#userFace').attr('src','/file/showImageByPath?path='+imgpath);

        });


        //上传头像
        upload.render({
            elem: '.userFaceBtn',
            url: '/file/uploadFile',
            acceptMime:'image/*',
            field:'mf',
            method : "post",
            done: function(res, index, upload){
                var path=res.path;
                $('#userFace').attr('src','/file/showImageByPath?path='+path);
                $('.userFace').css("background","#fff");
                //给隐藏域赋值
                $("#imgpath").val(path);
            }
        });
        $("#phone").on("blur",function () {
            var phone = $(this).val();
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(phone)) {
                layer.msg("手机号格式有误");
                return false;
            }
        });
        $("#email3").on("blur",function () {
            var email3 = $(this).val();
            var myreg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/ ;
            if (!myreg.test(email3)) {
                layer.msg("邮箱格式有误");
                return false;
            }
        });
        //提交个人资料
        form.on("submit(changeUser)",function(data){
            // var remark = $("#remark");
            // var phone = $("#phone");
            var phone = $("#phone").val();
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(phone)) {
                layer.msg("手机号格式有误");
                return false;
            }
            var index = layer.msg('提交中，请稍候',{icon: 16,time:false,shade:0.8});
            $.post("/user/updateUserInfo", data.field, function (res) {
                if(res.code = -1){
                    layer.msg(res.msg);
                    return false;
                }else {
                    layer.msg(res.msg);
                }
            });
            setTimeout(function(){
                layer.close(index);

            },2000);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        })
    });


</script>

</body>
</html>